<template>
  <el-container>
    <el-header height="15%">
      <!--
       头部
       -->
       <div class="title">在线教育平台-后台管理系统</div>
       <div style="display: flex; flex-direction: row; justify-content: center; align-items: center; margin-right: 50px;">
         <img class="img" src="../assets/header.jpeg"></img>
         <div style="display: flex; flex-direction: column; justify-content: space-around; align-items: center; margin-left: 20px; height: 100px;">
           <span style="color: #2c3e50; font-weight: 600;">{{loginuser.name}}</span>
           <el-button type="warning" @click="logout">注销</el-button>
         </div>
       </div>

    </el-header>
    <el-container>
      <el-aside width="15%">
        <!-- 菜单部分 -->
        <el-menu
            default-active="2"
            background-color="#D3DCE6"
            text-color="#2c3e50"
            active-text-color="#C71585">
            <!-- <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-s-management"></i>
                <span>行政管理</span>
              </template>
              <el-menu-item index="1-1" @click="routerView('/DepartmentManager')">部门管理</el-menu-item>
            </el-submenu>

            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-user"></i>
                <span>员工管理</span>
              </template>
              <el-menu-item index="2-1" @click="routerView('/UserManager')">职工管理</el-menu-item>
              <el-menu-item index="2-2" @click="routerView('/RoleManager')">角色管理</el-menu-item>
              <el-menu-item index="2-3" @click="routerView('/PowerManager')">权限管理</el-menu-item>
            </el-submenu> -->

            <!-- 一级菜单 -->
            <el-submenu v-for="(power,i) in loginuser.powers" v-if="power.powerType == 0" :index="i+1">
              <template slot="title">
                <i :class="power.powerInfo"></i>
                <span>{{power.powerName}}</span>
              </template>
              <!-- 二级菜单 -->
              <el-menu-item v-for="(power2,j) in loginuser.powers" v-if="(power2.powerType == 1 && power2.pid == power.id)"
                    :index="(i+1) + '-' + (j+1)" @click="routerView(power2.powerInfo)">{{power2.powerName}}</el-menu-item>
            </el-submenu>

          </el-menu>

      </el-aside>
      <el-main>
        <!-- 操作区域 -->
        <router-view style="width: 100%; height: 100%;"></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  export default {
    data() {
      return {
        loginuser:{
          name: "",
          //当前用户的权限列表
          powers: []
        }
      }
    },
    methods: {
      //菜单跳转的方法
      routerView(url){
        this.$router.push(url);
      },
      //注销的方法
      logout(){
        //删除当前的令牌
        localStorage.removeItem("userToken");
        //跳转到登录页
        this.$router.push("/");
      }
    },
    mounted(){
      //页面加载时触发，获取登录令牌，解析登录的用户名称
      var jwtToken = this.$.getUserToken();
      if(!jwtToken){
        //说明当前没有登录，则跳转到登录页面
        this.$router.push("/");
      }

      //解析jwtToken令牌
      var userInfo = JSON.parse(this.$.parseJwtToken(jwtToken));
      this.loginuser.name = userInfo.name;
      this.loginuser.powers = userInfo.powers;
    }
  }
</script>

<style>

  html, body {
    padding: 0px;
    margin: 0px;
  }

  .el-container {
    height: 100%;
  }

  .el-header {
    background-color: #B3C0D1;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    height: 100%;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    height: 100%;
    padding: 0px;
  }

  .title{
    color: #2c3e50;
    font-size: 30px;
    font-weight: 600;
    text-shadow: 5px 5px 5px dimgray;
  }

  .img {
    width: 80px;
    height: 80px;
    border-radius: 50px;
  }

</style>
